<template>
  <el-dropdown trigger="click" v-bind="$attrs" v-on="$listeners">
    <slot></slot>
    <el-dropdown-menu slot="dropdown" :class="appTheme">
      <slot name="items"> </slot>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
export default {
  name: "Dropdown",
  computed: {
    appTheme() {
      return this.$store.state.settings.appTheme;
    },
  },
};
</script>
<style lang="scss">
@import "@/style/variables.scss";
.el-dropdown-menu.theme-dark {
  color: #fff;
  .el-dropdown-menu__item {
    color: #fff;
  }
  .el-dropdown-menu__item:focus,
  .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #fff;
    color: #fff;
  }
  .el-dropdown-menu__item--divided {
    border-top: 1px solid #eee;
    &:before {
      background-color: transparent;
    }
  }
}
</style>
